<template>
  <div class="p-body">
    <el-carousel style="margin-top:52px" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in 4" :key="item">
        <img
          src="http://img.desktx.com/d/file/wallpaper/scenery/20170120/df204ebd7a4829933463e2989deb54c6.jpg"
        />
      </el-carousel-item>
    </el-carousel>
    <div class="bgtext">
      <h1>SHOPPING</h1>
      <p>U购</p>
    </div>
    <div class="tabs" style="width:800px;margin:0 auto">
      <p
        @click="onTabTwo(item.value)"
        :class="{ on: curIndexTwo == item.value }"
        v-for="(item, index) in txList"
        :key="index"
      >
        {{ item.label }}
      </p>
    </div>
    <div class="l1">
      <div class="l1-item" v-for="v in 5" :key="v">
        <div class="tag">
          8折
        </div>
        <img
          style="width:220px;height:134px"
          src="http://img.desktx.com/d/file/wallpaper/scenery/20170120/df204ebd7a4829933463e2989deb54c6.jpg"
        />
        <div>美的连云港点成</div>
        <div style="display:flex">
          <div class="new1"></div>
          <div>持花果山英才卡<span style="color:#CC3333">8折</span>优惠</div>
        </div>
      </div>
    </div>
    <div class="bgtext">
      <h1>LEISURE TIME</h1>
      <p>文体休闲</p>
    </div>
    <div class="tab">
      <div class="tab-l">
        <div class="new2"></div>
        <div>本地休闲优惠</div>
      </div>
      <div>全部></div>
    </div>
    <div class="l1">
      <div v-for="v in 5" :key="v">
        <img
          style="width:220px;height:134px"
          src="http://img.desktx.com/d/file/wallpaper/scenery/20170120/df204ebd7a4829933463e2989deb54c6.jpg"
        />
        <div>美的连云港点成</div>
        <div style="display:flex">
          <div class="new1"></div>
          <div>持花果山英才卡<span style="color:#CC3333">8折</span>优惠</div>
        </div>
      </div>
    </div>

    <div class="tab" style="background:#70AD54 ;">
      <div class="tab-l">
        <div class="new3"></div>
        <div>赴外出行优惠</div>
      </div>
      <div>全部></div>
    </div>

    <div class="l1">
      <div v-for="v in 5" :key="v">
        <img
          style="width:220px;height:134px"
          src="http://img.desktx.com/d/file/wallpaper/scenery/20170120/df204ebd7a4829933463e2989deb54c6.jpg"
        />
        <div>美的连云港点成</div>
        <div style="display:flex">
          <div class="new1"></div>
          <div>持花果山英才卡<span style="color:#CC3333">8折</span>优惠</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      txList: [
        { value: "0", label: "家电" },
        { value: "1", label: "家居" },
        { value: "2", label: "4S店" },
        { value: "3", label: "保洁" },
        { value: "4", label: "建材市场" }
      ],
        curIndexTwo: 0,
    };
  },
  created() {},
  methods: {
     onTabTwo(ind) {
      this.curIndexTwo = ind;
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
